<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CIVITAS2 - 单机版古典社会模拟</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="game-container">
        <header class="game-header">
            <h1>CIVITAS2</h1>
            <div class="game-time">
                <span id="year">第1年</span>
                <span id="season">春季</span>
                <span id="day">第1天</span>
            </div>
        </header>
        
        <nav class="game-nav">
                <ul>
                    <li><a href="#player" onclick="showPanel('playerPanel')">角色</a></li>
                    <li><a href="#city" onclick="showPanel('cityPanel')">城市</a></li>
                    <li><a href="#farming" onclick="showPanel('farmingPanel')">种植</a></li>
                    <li><a href="#cooking" onclick="showPanel('cookingPanel')">烹饪</a></li>
                    <li><a href="#inventory" onclick="showPanel('inventoryPanel')">物品</a></li>
                    <li><a href="#skills" onclick="showPanel('skillsPanel')">技能</a></li>
                </ul>
            </nav>
        
        <main class="game-content">
            <!-- 角色面板 -->
            <div id="playerPanel" class="panel">
                <h2>角色信息</h2>
                <div class="player-stats">
                    <div class="stat">
                        <label>快乐值:</label>
                        <span id="happiness">100</span>
                    </div>
                    <div class="stat">
                        <label>精力值:</label>
                        <span id="stamina">100</span>
                    </div>
                    <div class="stat">
                        <label>健康值:</label>
                        <span id="health">100</span>
                    </div>
                </div>
                
                <h3>四维属性</h3>
                <div class="attributes">
                    <div class="attribute">
                        <label>力量:</label>
                        <span id="strength">10</span>
                    </div>
                    <div class="attribute">
                        <label>敏捷:</label>
                        <span id="agility">10</span>
                    </div>
                    <div class="attribute">
                        <label>智力:</label>
                        <span id="intelligence">10</span>
                    </div>
                    <div class="attribute">
                        <label>魅力:</label>
                        <span id="charisma">10</span>
                    </div>
                </div>
            </div>
            
            <!-- 城市面板 -->
            <div id="cityPanel" class="panel" style="display: none;">
                <h2>城市信息</h2>
                <div class="city-info">
                    <div class="info-item">
                        <label>城市名称:</label>
                        <span id="cityName">新手村</span>
                    </div>
                    <div class="info-item">
                        <label>气候类型:</label>
                        <span id="climateType">温带季风</span>
                    </div>
                    <div class="info-item">
                        <label>当前天气:</label>
                        <span id="currentWeather">晴</span>
                    </div>
                    <div class="info-item">
                        <label>当前温度:</label>
                        <span id="currentTemperature">20°C</span>
                    </div>
                </div>
                
                <h3>建筑列表</h3>
                <div id="buildingsList">
                    <!-- 建筑列表将动态生成 -->
                </div>
                
                <h3>建造建筑</h3>
                <div class="build-menu">
                    <select id="buildingType">
                        <!-- 建筑选项将在城市加载时动态生成 -->
                    </select>
                    <button onclick="startBuilding()">开始建造</button>
                </div>
            </div>
            
            <!-- 种植面板 -->
            <div id="farmingPanel" class="panel" style="display: none;">
                <h2>种植系统</h2>
                <div class="farm-info">
                    <div class="info-item">
                        <label>灌溉值:</label>
                        <span id="irrigationValue">150</span>
                    </div>
                    <div class="info-item">
                        <label>肥力值:</label>
                        <span id="fertilityValue">50</span>
                    </div>
                </div>
                
                <div class="farm-actions">
                    <button onclick="irrigateField(getActiveCharacter())">灌溉农田</button>
                    <button onclick="fertilizeField(getActiveCharacter())">施肥农田</button>
                </div>
                
                <h3>选择作物</h3>
                <div class="crop-selection">
                    <select id="cropType">
                        <!-- 作物选项将在种植面板初始化时动态生成 -->
                    </select>
                    <button onclick="plantCrop(getActiveCharacter())">种植</button>
                </div>
                
                <h3>农田状态</h3>
                <div id="farmStatus">
                    <!-- 农田状态将动态生成 -->
                </div>
            </div>
            
            <!-- 物品面板 -->
            <div id="inventoryPanel" class="panel" style="display: none;">
                <h2>物品栏</h2>
                <div id="inventoryList">
                    <!-- 物品列表将动态生成 -->
                </div>
            </div>
            
            <!-- 烹饪面板 -->
            <div id="cookingPanel" class="panel" style="display: none;">
                <h2>烹饪系统</h2>
                <div class="cooking-container">
                    <div class="recipes-section">
                        <h3>可用食谱</h3>
                        <div id="recipesList">
                            <!-- 食谱列表将动态生成 -->
                        </div>
                    </div>
                    <div class="materials-section">
                        <h3>材料管理</h3>
                        <div id="cookingMaterials">
                            <!-- 材料列表将动态生成 -->
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 技能面板 -->
            <div id="skillsPanel" class="panel" style="display: none;">
                <h2>技能系统</h2>
                <div id="skillsList">
                    <!-- 技能列表将动态生成 -->
                </div>
            </div>
        </main>
        
        <footer class="game-footer">
            <div class="game-controls">
                <button onclick="nextDay()">下一天</button>
                <button onclick="saveGame()">保存游戏</button>
            </div>
        </footer>
    </div>
    
    <!-- 引入JavaScript模块 -->
    <script type="module">
        // 导入并暴露到window对象
        import { getActiveCharacter } from './js/character.js';
        import { plantCrop, irrigateField, fertilizeField } from './js/farming.js';
        // 暴露到全局作用域，以便在HTML内联事件中使用
        window.getActiveCharacter = getActiveCharacter;
        window.plantCrop = plantCrop;
        window.irrigateField = irrigateField;
        window.fertilizeField = fertilizeField;
        import './js/game.js';  // 导入主游戏模块，执行初始化逻辑
    </script>
</body>
</html>